<template>
  <div class="allot-menu">
    <div class="tree-box">
      <!-- 默认打开所有节点 default-expand-all -->
      <el-tree ref="treeRef" :data="data" show-checkbox node-key="id" default-expand-all :highlight-current="true"
        :props="defaultProps" />
    </div>
    <div class="btn-box">
      <el-button type="primary" @click="toConfirm">保存</el-button>
      <el-button @click="restDefaultChecked">清空</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as http from '@/request/http';
import { ElMessage, ElMessageBox, ElTree } from 'element-plus';
import { ref } from 'vue';
import { useRoute } from 'vue-router';

interface treeData {
  id: number;
  label: string;
  children: childrenTree[]
}

interface childrenTree {
  id: number;
  label: string;
}

const route = useRoute();
// 拿到路由query传参传过来的roleId
const roleId = parseInt(route.query.id as string);
console.log(roleId);


const data = ref<treeData[]>([]);
// const defaultCheckedKeys = ref<number[]>([]);

const treeRef = ref<InstanceType<typeof ElTree>>();

const defaultProps = {
  children: 'children',
  label: 'label',
}


// 处理 树状结构菜单数据   处理成  el-tree 所需的数据
function getTreeData(menuTreeList: IMenuTreeListModel[]) {
  const treeData: treeData[] = [];

  menuTreeList.forEach(item => {
    const menuTree = {
      id: item.id,
      label: item.title,
      children: [] as childrenTree[]
    };

    item.children.forEach(el => {
      const menuTreeChildren = {
        id: el.id,
        label: el.title
      };

      menuTree.children.push(menuTreeChildren);
    });

    treeData.push(menuTree);
  });

  return treeData;
}

// 发送请求获取 整个树状菜单结构
http.menu.getMenuTreeList().then(res => {
  // console.log('树状菜单结构 : ', res);
  const treeData = getTreeData(res.data);
  // console.log('处理完成之后的treeData :', treeData);
  data.value = treeData;

  // 保证整个树状菜单结构已经渲染出来的情况下,再发请求获取默认勾选的内容(当前角色已经拥有的菜单权限)
  http.role.getRoleMenuById(roleId).then(res => {
    // console.log('默认选中 :', res);
    const keys = res.data;  // 拿到默认选中的数据  我们只需要一个id,所以这里使用map方法处理一下
    const defaultCheckedKeys = keys.map(item => item.id);
    // console.log('默认选中的id组成的数组 :', defaultCheckedKeys);
    treeRef.value!.setCheckedKeys(defaultCheckedKeys, false);

  })
})

// 点击清空  
const restDefaultChecked = () => {
  // 清空当前所有默认选中   defaultCheckedKeys.value
  // defaultCheckedKeys.value = [];
  // console.log(defaultCheckedKeys.value);

  treeRef.value!.setCheckedKeys([], false)

}

// 点击 保存 
const toConfirm = () => {
  ElMessageBox.confirm(
    '此操作将为当前角色分配新的菜单信息,是否继续?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // console.log(defaultCheckedKeys.value);
    const checkedKeys = treeRef.value!.getCurrentKey();
    console.log('checkedKeys :', checkedKeys);

    ElMessage.success('分配菜单成功');
    // 发送请求 修改角色
    // http.role.updateRoleById(props.roleEditForm).then(res => {
    //   if (res.code === 200) {
    //     // 提示用户 修改成功
    //     ElMessage.success('分配菜单成功');
    //     emits('confirm');  // 调用confirm自定义事件  父组件监听confirm自定义事件 执行相应回调函数  并关闭窗口
    //   }
    // })

  }).catch(() => {
    ElMessage.warning('取消分配');
  })
}


</script>

<style scoped lang="less">
.allot-menu {
  padding: 20px;
  box-shadow: 0 2px 12px 1px rgba(0, 0, 0, .1);

  .btn-box {
    margin: 20px 0;
    display: flex;
    justify-content: center;
  }
}
</style>